import React from 'react';
import { connect } from 'dva';
import { Button } from 'antd';
import styles from './Commoncard.css';
import Poker from '../Poker/Poker';

class Commoncard extends React.Component {
  constructor(props) {
    super(props);
    console.log(props);
    this.state = {
      start: true,
      prepare: false,
      string: '准备',
      bet: 0,
      poker: [],
    };
  }

  start = () => {
    const roomNum = this.props.prop.roomnum;
    this.props.dispatch({
      type: 'room/start',
      payload: { roomNum },
    });
  }

  plan =() => {
    if (!this.state.prepare) {
      const roomNum = this.props.prop.roomnum;
      this.props.dispatch({
        type: 'room/plan',
        payload: { roomNum },
      });
      this.setState({ prepare: true, string: '已准备' });
    }
  }

  household = () => {
    if (this.props.prop.username === this.props.prop.householder) {
      return true;
    }
    return false;
  }

  componentWillReceiveProps(next) {
    const room = next.room;
    if (room.stake && room.stake.jackpot) {
      this.setState({ bet: room.stake.jackpot });
    }
    if (room.common.length) {
      this.setState({ start: false, poker: room.common });
    }
  }

  render() {
    return (
      <div className={styles.root}>
        {
          this.state.start ? (
            <div className={styles.start}>
              {
                this.household() ? (
                  <Button type="primary" onClick={this.start} size="large">开始</Button>
                ) : (
                  <Button type="primary" onClick={this.plan} size="large" >{this.state.string}</Button>
                )
              }
            </div>
          ) : (
            <div className={styles.commonCard}>
              {
                this.state.poker.map((e, i) => {
                  return (<Poker key={i} data={e} />);
                })
              }
            </div>
          )
        }
        <div className={styles.totle}>
        奖池：￥{this.state.bet}
        </div>
      </div>
    );
  }

}

const mapStateToProps = (state) => {
  return {
    prop: state.ready.data,
    room: state.room,
  };
};
export default connect(mapStateToProps)(Commoncard);
